<!--
 * @Title: 
 * @Description: 
 * @Author: 靖博君
 * @Date: 2024-02-22 11:13:01
 * @FilePath: /vue3-admin-naive-starter/src/views/login/login-container.vue
-->
<template>
  <div class="w-full h-full flex">
    <div class="flex-auto border-right flex justify-center items-center">
      vue3-admin-naive-starter
    </div>
    <div class="flex-none w[35%] flex justify-center items-center">
      <div class="login-box">
        <h1>vue3-admin-naive-starter</h1>
        <n-form
          ref="formRef"
          label-align="right"
          label-placement="left"
          :model="dataForm"
          :rules="rules"
        >
          <n-form-item label="账户" path="account">
            <n-input v-model:value="dataForm.account" placeholder="请输入登录账号" />
          </n-form-item>
          <n-form-item label="密码" path="pwd">
            <n-input v-model:value="dataForm.pwd" placeholder="请输入登录账号" />
          </n-form-item>
          <n-button @click="handleLogin">登录</n-button>
        </n-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { FormInst, FormRules } from 'naive-ui'
import { type LoginForm } from '@/api/login'
import router from '@/router'
import { useLoginStore } from '@/stores/login'
const formRef = ref<FormInst>()
const dataForm = ref<LoginForm>({
  account: '',
  pwd: '',
  code: ''
})

const rules: FormRules = {
  account: [
    {
      required: true,
      trigger: ['blur', 'change']
    }
  ],
  pwd: [
    {
      required: true,
      trigger: ['blur', 'change']
    }
  ]
}
const msg = useMessage()

const handleLogin = async () => {
  try {
    await formRef.value?.validate((errors) => {
      if (!errors) {
        useLoginStore()
          .loginAction(dataForm.value)
          .then((res) => {
            console.log('ressssss', res)
            router.push({ name: 'home' })
          })
          .catch((error) => {
            console.log('errorerrorerrorerrorerror', error)
            msg.error('登录失败')
          })
      }
    })
  } catch (error) {
    /**Empty */
  }
}
</script>
